<!--  -->
<template>
  <div class="housing">
    <div class="housingtop">
      <span>订单管理</span>
    </div>
    <div class="housingmain">
      <!-- 三级联动 搜索  -->
      <div class="sanji">
        <div class="blocks">
          订单类型:
          <select>
            <option value="">请选择</option>
            <option value="">二手房出租</option>
            <option value="">有房出租</option>
          </select>

          <div class="block">
            搜索:
            <el-input
              v-model="input"
              placeholder="关键字"
              style="width: 150px"
            ></el-input>

            <button @click="sou()">查询</button>
          </div>
        </div>
      </div>

      <!-- 增删改查 -->
      <el-table :data="list" border style="width: 97%">
        <el-table-column prop="id" label="序号" width="150"> </el-table-column>
        <el-table-column prop="price" label="编号" width="120">
        </el-table-column>
        <el-table-column prop="name" label="用户名" width="200">
        </el-table-column>
        <el-table-column prop="sort" label="手机号" width="150">
        </el-table-column>
        <el-table-column prop="region" label="类型" width="150">
        </el-table-column>
        <el-table-column prop="price" label="支付金额" width="120">
        </el-table-column>
        <el-table-column prop="time" label="支付时间" width="150">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="handleDelete(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      activeName: "first",

      list: [],

      input: "",
      pageindex: 1,
      pagesize: 5,
      total: 0,
    };
  },
  //监听属性 类似于data概念
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    //删除
    handleDelete(id) {
      console.log(id);
      axios.delete(`/api/del/${id}`).then((res) => {
        console.log(res);
        this.$router.go(0);
      });
    },

    // 搜索
    sou() {
      // console.log("input", this.input);
      axios.get(`/api/search?name=${this.input}`).then((res) => {
        this.list = res.data;
      });
    },

    // 数据

    getliat() {
      axios
        .get("/api/list", {
          params: { pageindex: this.pageindex, pagesize: this.pagesize },
        })
        .then((res) => {
          console.log(res);
          this.list = res.data.data;
          this.total = res.data.total;
        });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getliat();

    // axios.get("/api/list").then((res) => {
    //   console.log(res);
    //   this.list = res.data;
    // });
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang="scss" scoped>
.housing {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #eee;
  .housingtop {
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
  }
  .housingmain {
    width: 98%;
    height: 750px;
    background: #fff;
    margin: 0 20px;
  }
}
.sanji {
  width: 100%;
  display: flex;
  margin: 10px;
  .block {
    margin: 0 10px;
    button {
      width: 100px;
      height: 40px;
      margin: 0 10px;
      border: none;
      background: skyblue;
      border-radius: 8px;
      color: #fff;
    }
  }
}
.xin {
  width: 100px;
  height: 40px;
  margin: 5px 20px;
  background: skyblue;
  color: #fff;
}
.el-table {
  margin: 0 auto;
}
.paging {
  margin: 10px 0;
  text-align: right;
  margin-right: 30px;
}
.blocks {
  display: flex;
  align-items: center;
  select {
    width: 100px;
    height: 35px;
  }
}
</style>
